<template>
	<el-card id="search-table" class="table-card">
		<el-table ref="searchTable" :data="data" :highlight-current-row="true" row-key="id" :stripe="stripe" border fit :row-class-name="rowClass"
			:show-summary="isSum" :summary-method="computeSums" height="calc(61.6vh)" @row-click="rowClick" @selection-change="handleSelectionChange"
			:cell-style="{background:'rgba(248,253,246,0.93)'}" :row-style="isSum ? sumRowStyle : commonRowStyle"
			:header-cell-style="{background:'rgb(204,231,236)',color:'#333838',height:'calc(5.1vh)'}">
			<el-table-column v-if="isMultiple" align="center" type="selection" width="60px"></el-table-column>
			<el-table-column v-if="data.length > 1" :index="createIndex" align="center" label="序号" type="index" width="90px"></el-table-column>
			<template v-for="item in columns">
				<template v-if="item.kind.toString() === 'input'">
					<el-table-column :label="item.label" :prop="item.prop" :sort-method="sortData(item.prop)" :sortable="Boolean(item.sortable)" :width="item.width"
						align="center" show-overflow-tooltip>
						<template v-slot="scope">
							<span>{{scope.row[item.prop]}}</span>
						</template>
					</el-table-column>
				</template>
				<template v-if="item.kind.toString() === 'date' || item.kind.toString() === 'time' || item.kind.toString() === 'datetime'">
					<el-table-column :label="item.label" :prop="item.prop" :sort-method="sortData(item.prop)" :sortable="Boolean(item.sortable)" :width="item.width"
						align="center" show-overflow-tooltip>
						<template v-slot="scope">
							<span>{{scope.row[item.prop] | dateFormat(item.kind.toString())}}</span>
						</template>
					</el-table-column>
				</template>
			</template>
			<template v-if="isMultiple">
				<el-table-column align="center" column-key="operation" fixed="right" label="操作" width="120px">
					<template v-if="isMultiple" slot="header">
						<el-button size="small" type="danger" @click="batchDelete()">批量删除</el-button>
					</template>
					<template v-slot="scope">
						<el-button size="small" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
					</template>
				</el-table-column>
			</template>
		</el-table>
		<el-pagination :current-page.sync="currentPage" :hide-on-single-page="false" :page-count="totalPage" :page-size.sync="pageSize"
			:page-sizes="pageSizes" :total="totalCount" background layout="total, sizes, prev, pager, next, jumper, slot" @size-change="handleSizeChange"
			@current-change="handleCurrentChange"><span class="el-pagination__total total-page">共&nbsp;{{totalPage}}&nbsp;页</span>
		</el-pagination>
	</el-card>
</template>

<script>
export default {
	name: "search-table",
	props: {
		data: {
			type: Array,
			default() {
				return [];
			}
		},
		columns: {
			type: Array,
			default() {
				return [];
			},
			validator: (value) => {
				return value.length >= 1;
			}
		},
		totalCount: {
			type: Number,
			default: 0
		},
		stripe: {
			type: Boolean,
			default: true
		},
		contrast: {
			type: Object,
			default() {
				return {};
			}
		},
		isMultiple: {
			type: Boolean,
			default: false
		},
		isSum: {
			type: Boolean,
			default: false
		}
	},
	data() {
		return {
			currentPage: 1,
			pageSize: 10,
			pageSizes: [10, 20, 30, 40],
			multipleSelection: []
		};
	},
	updated() {
		this.$nextTick(() => {
			this.$refs.searchTable.doLayout();
		});
	},
	computed: {
		totalPage() {
			let pageCount = this.totalCount % this.pageSize === 0 ? this.totalCount / this.pageSize : parseInt(this.totalCount / this.pageSize) + 1;
			return pageCount === 0 ? 1 : pageCount;
		}
	},
	methods: {
		handleSizeChange(val) {
			this.pageSize = val;
			this.$emit("handle-size", this.pageSize);
		},
		handleCurrentChange(val) {
			this.currentPage = val;
			this.$emit("handle-current", this.currentPage);
		},
		toggleSelection(rows) {
			if (rows) {
				rows.forEach(row => {
					this.$refs.searchTable.toggleRowSelection(row);
				});
			} else {
				this.$refs.searchTable.clearSelection();
			}
		},
		handleSelectionChange(val) {
			this.multipleSelection = val;
			this.$emit("handle-selection", this.multipleSelection);
		},
		handleDelete(rowIndex, row) {
			this.$emit("handle-delete", rowIndex, row);
		},
		batchDelete() {
			console.log("批量删除");
		},
		sortData(value) {
			return this.arraySort.compareValues(value);
		},
		createIndex(index) {
			return (this.currentPage - 1) * this.pageSize + index + 1;
		},
		rowClick(row, column, event) {
			if (column.columnKey !== "operation") {
				this.$emit("handle-click", row);
			}
		},
		rowClass({row, rowIndex}) {
			let rowClassName = "";
			if (!this.stripe && this.contrast) {
				if (this.contrast[row.level] === "3") {
					rowClassName += "warning-row";
				} else if (this.contrast[row.level] === "1") {
					rowClassName += "success-row";
				} else if (this.contrast[row.level] === "4") {
					rowClassName += "error-row";
				} else {
					rowClassName += "debug-row";
				}
			}
			return rowClassName.trim();
		},
		computeSums() {
			if (this.isSum) {
				const n = this.isMultiple ? 2 : 1;
				let sums = this.sumUtils.getSums(this.data, this.columns, n, false);
				if (sums.filter(s => s != null && s !== "").length === 1) {
					this.isSum = false;
				} else {
					return sums;
				}
			}
		}
	}
};
</script>

<style scoped>
#search-table >>> .el-card {
	background-color: #F5F5F5;
}

#search-table {
	padding: 0;
	margin-top: 5px;
	height: calc(69vh);
}

#search-table >>> .el-card__body {
	padding: 10px;
	height: calc(62.7vh);
}

#search-table >>> .el-pagination {
	height: calc(6.3vh);
}

#search-table >>> .el-table {
	border-width: 2px;
	background-color: #F5F5F5;
}

#search-table >>> .el-table__header-wrapper {
	height: calc(5.1vh);
}

#search-table >>> .el-table__header {
	height: calc(5.1vh);
	margin-top: -5px;
}

#search-table >>> .el-table__footer-wrapper {
	height: calc(4.7vh);
	margin: 0;
}

#search-table >>> .el-pagination {
	margin-top: 10px;
}

#search-table >>> .el-pagination__sizes .el-input .el-input__inner {
	width: calc(5.8vw);
}

.warning-row {
	color: #F39B16;
}

.success-row {
	color: #02A98F;
}

.error-row {
	color: #F51E30;
}

.debug-row {
	color: #1D4CF8;
}

.total-page {
	margin-left: 20px;
}
</style>
